<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>预订列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <script type="text/javascript" src="../../script/aes.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script type="text/javascript" src="../../script/modeecb.js"></script>
    <script type="text/javascript" src="../../script/tmd5.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
    <script type="text/javascript" src="../../resource/jquery214.js"></script>
    <style>
    	body{
    	    margin: 0;	
    	    background:url(../../image/bj.png) repeat-x 0;
    	    background-size: 100%;
    	}
    	.title{
    	    height: 45px;
    	    background: #0483d3;
    	    color: #ffffff;
    	    line-height: 45px;
    	    font-size: 20px;
    	    padding-left: 10px;
    	    margin-bottom: 20px;
    	}
        .book{
            width: 90%;
            background: #ffffff;
            border-bottom: #e0e0e0 1px solid;
            border-top: #e0e0e0 1px solid;
            display: table;
            padding: 5%;
            height: 100px;
        }
        .imgdiv{
            width: 100%;
            height: 80px;
            display:table-cell;
            vertical-align:middle;
        }
        .book_text{
            text-align: center;
            color: #666666;
            width: 90%;
            height: 80px;
            line-height: 80px;
            background: #fff;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<header id="statusBar">
  <div class="title">
    预订列表
  </div>
  </header>
  <div id="book_info">
    
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
	apiready = function(){
	    
	    if(api.systemType == "ios"){
		   document.getElementById("statusBar").style.background = "#298cb4";
		}
	    $api.fixStatusBar( $api.dom('header') );
	    
	    var hotelId = $api.getStorage("hotelId");
	    api.addEventListener({
		    name: 'bookSuccess'
		}, function(ret, err) {
		   location.reload();
		});
		var UILoading = api.require('UILoading');
	    UILoading.flower({
		    center: {
		        x: api.winWidth/2.0,          
		        y: api.winHeight/2.0 
		    },
		    size: 30,
		    mask: "rgba(0,0,0,0.5)",
		    fixed: true
	    }, function(ret) {
		    uiId = ret.id;
	    });
	    var callback = function(ret, err){
	        UILoading.closeFlower({
			    id: uiId
			});
	        if(ret){ 
	          if(ret.success == true || ret.success == "true"){
			       var html = "";
			       if("[]" == ret.book){
			          html = "<div class=\"book_text\">未查询到预定信息</div>";
			       }else{
				      var data = eval("("+ret.book+")");
				      for(var i=0;i<data.length;i++){
				      html += "<div class=\"book\">"
		                +"<div style=\"float: left;height: 80%;\">"
		                + "<div>姓名："+data[i].name+"</div>"
				        + "<div>电话："+data[i].phone+"</div>"
				        + "<div>预定房间："+data[i].roomnum+"</div>"
				        + "<div>到达时间："+data[i].arrival+"</div>"
				        + "<div>离开时间："+data[i].departure+"</div>"
				        + "</div>"
				        + "<div style=\"float: right;width: 20%;height: 80px;padding-right: 20px;\" onclick=\"option('"+data[i].roomnum+"','"+data[i].roomid+"','"+data[i].id+"','"+data[i].phone+"','"+data[i].name+"','"+data[i].roomprice+"');\">"
				        + "<div class=\"imgdiv\">"
				        + "<img src=\"../../image/hotelManage/option.png\" style=\"width: 60%;vertical-align: middle;\"/>"
				        + "</div></div></div>";
				      }
			       }
			       $("#book_info").html(html);
		       }
	       }else{ 
	           alert(JSON.stringify(err));
	       }
	    }
	    var content = {"hotelId":hotelId};
	    apiAjax(JSON.stringify(content),url.queryBook,callback);
	};
	
	function option(num,id,ydid,phone,name,price){
	    api.actionSheet({
		    title: '房间号：'+num,
		    cancelTitle: '取消',
		    buttons: ['预定入住', '拨打电话', '取消预定']
		}, function(ret, err) {
		    var index = ret.buttonIndex;
            if(index == 1){
               checkin(name,num,id,price);
            }else if(index == 2){
               call(phone);
            }else if(index == 3){
               cancelBook(num,id,ydid);
            }
		});
	}
	
	function checkin(name,num,id,price){
	   api.openWin({
	       name: 'checkin',
	       url: 'checkin.html',
	       pageParam: {
	            name: name,
	            room: num,
	            id: id,
	            price: price
	       }
       });
	}
	
	function call(phone){
	    api.call({
		    type: 'tel_prompt',
		    number: phone
		});
	}
	
	function cancelBook(num,id,ydid){
	    var hotelId = $api.getStorage("hotelId");
	    var callback = function(ret, err){
	        //console.log(JSON.stringify(ret));
	        if(ret){
	           if(ret.success == true || ret.success == "true"){
	             location.reload();
	           }
	        }else{
	           alert(JSON.stringify(err));
	        }
	    }
	    var content = {"hotelId":hotelId,"roomnum":num,"roomid":id,"ydid":ydid};
	    apiAjax(JSON.stringify(content),url.cancelBook,callback);

	}
</script>
</html>